<template>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup" background-color="#fff" @change="change">
		<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			<view class="tancon">
				<view class="title">请填写个人信息</view>
				<view class="form">
					<view class="form-item">
						<text class="label required">姓名</text>
						<view class="input">
							<input class="inputc" clear v-model="form.realName" placeholder="请输入姓名" @input="clearInput1" />
							<uni-icons type="close" v-if="showClearIcon1" color="grey" size="20" @click="clearIcon1"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<text class="label required">身份证</text>
						<view class="input">
							<input class="inputc" v-model="form.certNo" placeholder="请输入身份证号" type="number"
								@input="clearInput9" />
							<uni-icons type="close" v-if="showClearIcon9" color="grey" size="20" @click="clearIcon2"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<text class="label required">手机号</text>
						<view class="input">
							<input class="inputc" v-model="form.mobile" placeholder="请输入手机号" type="number"
								@input="clearInput2" />
							<uni-icons type="close" v-if="showClearIcon2" color="grey" size="20" @click="clearIcon2"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<text class="label required">公司名称</text>
						<view class="input">
							<input class="inputc" v-model="form.companyName" placeholder="请输入公司名称" @input="clearInput3" />
							<uni-icons type="close" v-if="showClearIcon3" color="grey" size="20" @click="clearIcon3"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<text class="label required">公司地址</text>
						<view class="input">
							<input class="inputc" v-model="form.companyAddr" placeholder="请输入公司地址" @input="clearInput6" />
							<uni-icons type="close" v-if="showClearIcon6" color="grey" size="20" @click="clearIcon6"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<text class="label required">职位</text>
						<view class="input">
							<input class="inputc" v-model="form.job" placeholder="请输入职位" @input="clearInput4" />
							<uni-icons type="close" v-if="showClearIcon4" color="grey" size="20" @click="clearIcon4"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<text class="label required">邮箱</text>
						<view class="input">
							<input class="inputc" v-model="form.email" placeholder="请输入邮箱" @input="clearInput5" />
							<uni-icons type="close" v-if="showClearIcon5" color="grey" size="20" @click="clearIcon5"
								class="dingwo"></uni-icons>
						</view>
					</view>
					<view class="form-item flex">
						<checkbox-group @change="handleChange">
							<checkbox :value="teacherType" style="transform: scale(0.6);" color="var(--primary-color)" />
						</checkbox-group>
						<text>是否是讲师</text>
					</view>
					
				</view>
				<view class="btn-group">
					<button class="btn wechat" @click="submit()">提交</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					realName: '',//姓名
					certNo:'',//身份证号
					mobile: '',//手机号
					companyName: '',//公司名称
					companyAddr:'',//公司地址
					job: '',//职位
					email: '',//邮箱
					teacherType:false
				},
				showClearIcon1: false,
				showClearIcon2: false,
				showClearIcon3: false,
				showClearIcon4: false,
				showClearIcon5: false,
				showClearIcon6: false,
			}
		},
		onShow() {
			// this.$refs.popup.open()
			this.getCurrentUserInfoFun()
		},
		methods: {
			// 获取用户信息
			getCurrentUserInfoFun(){
				this.sjuRequest('wx/user/getCurrentUserInfo', 'post', true).then(res => {
					console.log('用户信息弹窗---获取用户信息信息')
					console.log(res)
					this.form = res.data
					this.form.certNo =  res.data.certNo || ''
					uni.setStorageSync('userInfo', res.data); //存用户信息
				})
			},
			handleChange(e) {
			  this.teacherType = !e.detail.value[0];
			  this.teacherType = !this.teacherType
			},
			showTan(type) {
				this.$refs.popup.open(type)
				console.log(type)
				console.log('调用子组件')
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			submit() {
				// 这里可以做表单校验和提交
				if(this.form.realName===''||this.form.mobile===''||this.form.companyName===''||this.form.companyAddr===''
					|this.form.job===''||this.form.email===''||this.form.certNo===''){
					uni.showToast({
						title: '请输入完整',
						icon: 'none'
					})
					return
				}
				if((this.form.certNo.length!==18 && this.form.certNo.length!==15)){
					uni.showToast({
						title: '请输入有效的身份证号',
						icon: 'none'
					})
					return
				}
				 const regex = /^1[3-9]\d{9}$/;
				  if (!regex.test(this.form.mobile)) {
					  uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					})
					return
				  } 
				console.log('走提交流程')
				this.sjuRequest("/wx/user/updateUserProfile", 'POST', this.form).then(res => {
					console.log('提交个人信息')
					console.log(res)
					if(res.errno===0){
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						this.$refs.popup.close()
						this.$forceUpdate()
						this.$emit('updataMsg')
					}
				})
				
			},
			clearInput1: function(event) {
				this.form.realName = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon1 = true;
				} else {
					this.showClearIcon1 = false;
				}
			},
			clearIcon1: function() {
				this.form.realName = '';
				this.showClearIcon1 = false;
			},
			clearInput2: function(event) {
				this.form.mobile = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon2 = true;
				} else {
					this.showClearIcon2 = false;
				}
			},
			clearIcon2: function() {
				this.form.mobile = '';
				this.showClearIcon2 = false;
			},
			
			
			clearInput9: function(event) {
				this.form.certNo = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon9 = true;
				} else {
					this.showClearIcon9 = false;
				}
			},
			clearIcon9: function() {
				this.form.certNo = '';
				this.showClearIcon9 = false;
			},
			
			
			clearInput3: function(event) {
				this.form.companyName = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon3 = true;
				} else {
					this.showClearIcon3 = false;
				}
			},
			clearIcon3: function() {
				this.form.companyName = '';
				this.showClearIcon3 = false;
			},
			clearInput4: function(event) {
				this.form.job = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon4 = true;
				} else {
					this.showClearIcon4 = false;
				}
			},
			clearIcon4: function() {
				this.form.job = '';
				this.showClearIcon4 = false;
			},
			clearInput5: function(event) {
				this.form.email = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon5 = true;
				} else {
					this.showClearIcon5 = false;
				}
			},
			clearIcon5: function() {
				this.form.email = '';
				this.showClearIcon5 = false;
			},
			clearInput6: function(event) {
				this.form.companyAddr = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon6 = true;
				} else {
					this.showClearIcon6 = false;
				}
			},
			clearIcon6: function() {
				this.form.companyAddr = '';
				this.showClearIcon6 = false;
			},
		}
	}
</script>

<style>
	.tancon {
		width: 600rpx;
		height: 57vh;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		position: relative;
	}
	
	.form-item {
		margin-bottom: 24rpx;
		position: relative;
	}
	
	.dingwo {
		position: absolute;
		right: 24rpx;
		top: 66rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #333;
		margin: 15rpx 0;
		display: block;
	}
	
	.required::before {
		content: '*';
		color: #f56c6c;
		margin-right: 4rpx;
	}
	
	.input {
		width: 93%;
		height: 80rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f7f8fa;
	}
	
	.inputc {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
		position: absolute;
		bottom: 20rpx;
		width: 600rpx;
	}
	
	.btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.wechat {
		background: #31b0e5;
	}
	
	.alipay {
		background: #2d5af1;
	}
	
	.iconfont {
		font-size: 36rpx;
		margin-right: 12rpx;
	}
	
	.dibukong {
		width: 100%;
		height: 150rpx;
	}
	
	.dibu {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.form{
		height: 45vh;
		overflow: auto;
	}
	.title{
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	
</style>